<template>
  <div class="employment-notice">
    <el-card class="notice-card">
      <div slot="header" class="clearfix">
        <span></span>
      </div>

      <div class="notice-content">
        <div class="header-section">
          <h2 class="title">入职通知书</h2>
          <hr style="margin-bottom: 20px;">
          <p class="candidate-name">{{ formData.candidateName }} 先生/女士：</p>
        </div>

        <div class="content-section">
          <p>您好！</p>

          <p>非常高兴地通知您，公司已决定录用您至 <strong>{{ formData.departmentName }}</strong> 部门任 <strong>{{ formData.position
              }}</strong> 岗位。</p>

          <p>根据公司相关规定，您的薪酬及福利标准如下：</p>
          <ul>
            <li>试用期薪酬（税前）：¥{{ formData.probationSalary }}</li>
            <li>转正薪酬（税前）：¥{{ formData.regularSalary }}</li>
          </ul>

          <p><strong>报到信息：</strong></p>
          <ul>
            <li>报到日期：{{ formData.reportDate }}</li>
            <li>报到地址：{{ formData.reportAddress }}</li>
            <li>联系人：{{ formData.contactPerson }}</li>
            <li>联系电话：{{ formData.contactPhone }}</li>
          </ul>

          <p><strong>入职须知：</strong></p>
          <p>为了您顺利地完成入职手续的办理，您还需提前准备如下资料并在入职当天提交：</p>
          <ol>
            <li>两寸彩色照片一张；</li>
            <li>离职证明；</li>
            <li>身份证、学位证书复印件1份（身份证复印件2份）；</li>
            <li>户口簿【首页+本人页】复印件1份；</li>
            <li>工商银行卡【发放工资用】；</li>
            <li>员工自备笔记本电脑。研发人员自备笔记本要求8G内存，SSD硬盘，如需公司配备请提前告知；</li>
            <li>医院体检报告。</li>
          </ol>

          <p class="warning">
            请您务必在 {{ formData.reportDate }} 前来报到，逾期未报到的，该offer将自动失效。
          </p>

          <p>如有任何疑问，请及时与我们联系。</p>

          <p>期待您的加入！</p>

          <div class="signature-section">
            <p>{{ formData.companyName }}</p>
            <p>{{ formData.submit }}</p>
          </div>
        </div>
      </div>

      <div class="button-section">
        <el-button @click="onPrint">打印</el-button>
        <el-button v-if="formData.status !== '已入职' && formData.status !== '已拒绝'" @click="confirm" type="primary">我已阅读并确认</el-button>
        <el-button v-if="formData.status !== '已入职' && formData.status !== '已拒绝'" @click="refuse">拒绝</el-button>
        <el-button @click="onCancel">返回</el-button>
      </div>

      <!-- 已入职章印 -->
      <div v-if="formData.status === '已入职'" class="stamp-wrapper">
        <div class="stamp">
          <div class="stamp-circle"></div>
          <div class="stamp-text">
            <span v-for="(char, index) in formData.companyName" :key="index" :style="{
              transform: `rotate(${index * (360 / formData.companyName.length)}deg)`,
              left: '50%',
              top: '10px'
            }" class="stamp-char">
              {{ char }}
            </span>
          </div>
          <div class="stamp-center">已入职</div>
        </div>
      </div>

      <!-- 已拒绝章印 -->
      <div v-if="formData.status === '已拒绝'" class="rejected-stamp">
        <div class="rejected-stamp-text">已拒绝</div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps,defineEmits } from 'vue'
import request from '@/api/request'
let emits = defineEmits(['refTable'])
let closeTable=()=>{
  emits('refTable')
}
const resumeId = defineProps(['data'])
// 表单数据
const formData = reactive({
  offerId: '',
  candidateName: '候选人姓名',
  departmentName: '部门名称',
  position: '岗位名称',
  probationSalary: '5000',
  regularSalary: '8000',
  reportDate: '2023年10月01日',
  reportAddress: '北京市朝阳区xxx路xxx号',
  contactPerson: '人力资源部',
  contactPhone: '010-12345678',
  companyName: '说了你又不来有限公司',
  submit: '',
  sendDate: new Date().toLocaleDateString(),
  status: ''
})

const checkResumesAndRequirements = () => { // 检测简历和职位要求
  request({
    url: '/offermanagementtable/getOfferWithCandidateAndDept',
    method: 'get',
    params: {
      offerId: resumeId.data
    }
  }).then(res => {
    console.log("简历数据", res.data);
    formData.offerId = res.data[0].offerid
    console.log("职位数据", formData.offerId);
    
    formData.candidateName = res.data[0].candidateresume.candidatename
    formData.departmentName = res.data[0].department.deptName
    formData.position = res.data[0].recruitmentrequirement.jobname
    formData.probationSalary = res.data[0].probationarySalary
    formData.regularSalary = res.data[0].salary
    formData.reportDate = res.data[0].reportedDate
    formData.reportAddress = res.data[0].reportingAddress
    formData.contactPerson = res.data[0].candidateresume.candidatename
    formData.contactPhone = res.data[0].candidateresume.cellPhone
    formData.submit = res.data[0].submit
    // 设置状态
    formData.status = res.data[0].offerStatus
  })
}
checkResumesAndRequirements()
// 打印功能
const onPrint = () => {
  window.print()
}

// 确认
const confirm = () => {
  const offerData = {
    offerid: formData.offerId,
    offerStatus: "已入职"
  };
  
  request({ 
    url:'/offermanagementtable/updateOfferStatus',
    method:'put',
    data: offerData
  }).then(res=>{
    console.log("确认成功",res.data);
    // 更新状态为已入职
    formData.status = "已入职"
  })
}
const onCancel=()=>{
  closeTable()
}
// 拒绝功能
const refuse = () => {
  const offerData = {
    offerid: formData.offerId,
    offerStatus: "已拒绝"
  };
  
  request({ 
    url:'/offermanagementtable/updateOfferStatus',
    method:'put',
    data: offerData
  }).then(res=>{

    // 更新状态为已拒绝
    formData.status = "已拒绝"
  })
}
</script>

<style scoped>
.employment-notice {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.notice-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

.title {
  text-align: center;
  color: red;
  margin-bottom: 30px;
}

.candidate-name {
  font-size: 16px;
  margin-bottom: 20px;
}

.content-section {
  line-height: 1.8;
}

.content-section p {
  margin: 10px 0;
}

.content-section ul,
.content-section ol {
  margin: 10px 0;
  padding-left: 20px;
}

.warning {
  color: red;
  font-weight: bold;
  margin: 20px 0;
}

.signature-section {
  margin-top: 40px;
  text-align: right;
}

.button-section {
  margin-top: 30px;
  text-align: center;
}

/* 已入职章印样式 */
.stamp-wrapper {
  position: absolute;
  top: 90%;
  right: 50px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.stamp {
  position: relative;
  width: 160px;
  height: 160px;
}

.stamp-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid red;
  border-radius: 50%;
  opacity: 1;
}

.stamp-char {
  position: absolute;
  left: 50%;
  top: 0px;
  font-size: 20px;
  font-weight: bold;
  transform-origin: 0 75px;
  color: red;
  width: 20px;
  text-align: center;
  margin-left: 0px;
  margin-top: -5px;
}

.stamp-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  color: red;
  z-index: 2;
}

/* 已拒绝章印样式 */
.rejected-stamp {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 120px;
  height: 40px;
  border: 3px solid red;
  transform: rotate(-20deg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.rejected-stamp-text {
  font-size: 20px;
  font-weight: bold;
  color: red;
}

@media print {
  .button-section {
    display: none;
  }
}
</style>